import { SparklesIcon } from '@heroicons/react/24/outline'
import Button from './ui/Button'
import useThemeStore from '../app/store/themeStore'

const ThemeToggle = () => {
  const mode = useThemeStore((s) => s.mode)
  const setMode = useThemeStore((s) => s.setMode)
  const next = mode === 'soft' ? 'vibrant' : 'soft'
  return (
    <Button
      variant="secondary"
      size="sm"
      onClick={() => setMode(next)}
      icon={<SparklesIcon className="h-4 w-4" />}
      className="min-w-0 gap-1 px-2 whitespace-nowrap sm:px-3"
      aria-label={mode === 'soft' ? '切换为活力配色' : '切换为柔和配色'}
      title={mode === 'soft' ? '活力配色' : '柔和配色'}
    >
      {mode === 'soft' ? '活力配色' : '柔和配色'}
    </Button>
  )
}

export default ThemeToggle
